<template>
  <div class="lottery box bg">
    <!-- 抽奖页面 -->
    <div class="lotterycontain box clmcenter">
      <div class="backbox">
        <img
          src="@/assets/img/back.png"
          class="goback"
          @click="$router.replace({ path: '/index', query: { intxt: 'back' } })"
        />
      </div>
      <div class="lotterybox clmstart">
        <div class="giftbox">
          <div class="giftimgbox" ref="scrollbox">
            <div class="gitem clmstart" v-for="item in giftlist" :key="item.id">
              <img
                :src="require(`@/assets/img/jp/${item.id}.png`)"
                class="giftimg"
              />
              <p class="giftname" v-html="item.name"></p>
            </div>
          </div>
        </div>
        <!-- 正在抽奖 -->
        <div class="drawtips" v-if="isin">
          {{ cjclick ? "正在抽奖" : "抽奖成功" }}
        </div>
        <div class="drawtips" v-else>抽奖错误</div>
      </div>
    </div>
    <!-- 中奖提示：线上领取 未填写收货地址-->
    <Online
      :jpname="signInfo.jpname"
      :jpimg="signInfo.jpimg"
      :wid="signInfo.wid"
      @closeOnline="closeOnline"
      v-show="online_no_write"
    />
    <!-- 中奖提示：线下核销 -->
    <Underline
      :jpname="signInfo.jpname"
      :jpimg="signInfo.jpimg"
      :wid="signInfo.wid"
      @subCall="closeUnderline"
      v-show="underlineshow"
    />
    <!-- 线下核销-核销二维码 -->
    <HxQrcode :qrcode="qrcode" v-show="qrshow" />
    <!-- 中奖提示：积分 -->
    <Jifen :jpname="signInfo.jpname.toString()" v-show="jifenshow" />
    <!-- 中奖提示：话费,线上礼品审核通过 -->
    <Gift
      :jpname="signInfo.jpname"
      :jpimg="signInfo.jpimg"
      :tipflag="tipflag"
      v-show="defaultshow"
    />
    <!-- 审核中 -->
    <Review @close="reviewshow = false" v-show="reviewshow" />
  </div>
</template>
<script>
import Online from "@/components/Online.vue";
import Underline from "@/components/Underline.vue";
import HxQrcode from "@/components/HxQrcode.vue";
import Jifen from "@/components/Jifen.vue";
import Gift from "@/components/Gift.vue";
import Review from "@/components/Review.vue";
export default {
  data() {
    return {
      signInfo: {
        jpname: "", // 奖品名称
        prizeId: "", // 奖品id
        jpimg: "", // 奖品图片
        wid: "",
        exch_method: "", // 领取方式
        type: "", // 1门店 2景区
        status: "", // 1需要审核
      },
      qrcode: "",
      cjclick: false, // 是否正在抽奖
      giftlist: [
        {
          id: "g11",
          name: "小米充气宝",
        },
        {
          id: "g19",
          name: "Dainese<br />骑行服",
        },
        {
          id: "g20",
          name: `GoPro<br />HERO12`,
        },
        {
          id: "g21",
          name: `大疆DJI<br />Pocket2`,
        },
        {
          id: "g15",
          name: `Dainese<br />骑行上衣`,
        },
        {
          id: "g16",
          name: `Dainese<br />骑行裤子`,
        },
        {
          id: "g17",
          name: `Dainese<br />骑行靴`,
        },
        {
          id: "g5",
          name: `壳牌爱德王子<br />冰袖`,
        },
        {
          id: "g1",
          name: `壳牌爱德王子<br />定制水杯`,
        },
        {
          id: "g4",
          name: `壳牌爱德王子<br />骑行面巾`,
        },
        {
          id: "g6",
          name: `壳牌爱德王子<br />骑行胸包`,
        },
        {
          id: "g9",
          name: `100元壳牌<br />加油站储值卡`,
        },
        {
          id: "g2",
          name: `壳牌爱德王子<br />定制T恤`,
        },
        {
          id: "g7",
          name: `40元话费充值`,
        },
        {
          id: "g12",
          name: `Dainese<br />护膝`,
        },
        {
          id: "g10",
          name: `爱德王子<br />热爱系列机油`,
        },
        {
          id: "g18",
          name: `Dainese<br />头盔`,
        },
        {
          id: "g14",
          name: `杜卡迪车模型`,
        },
        {
          id: "g3",
          name: `壳牌<br />定制钥匙扣`,
        },
        {
          id: "g23",
          name: `小米小爱音箱<br />Play增强版`,
        },
        {
          id: "g24",
          name: `壳牌定制<br />咖啡杯组合套装`,
        },{
          id: "g25",
          name: `竹纤维咖啡杯`,
        },
      ], // 礼品列表 g8:积分50 g13:积分300 g22:积分800
      online_no_write: false, // 线上领取 未填写
      underlineshow: false, // 线下领取
      qrshow: false, // 线下领取 核销二维码
      jifenshow: false, // 获得积分
      defaultshow: false, // 获得话费,线上领取已填写的礼品
      reviewshow: false, // 审核中
      timer1: null, // 抽奖定时器
      timer2: null, // 抽奖定时器
      isin: true,
      tipflag: false, // 是否显示邮寄提示
    };
  },
  mounted() {
    if (JSON.stringify(this.$route.params) !== "{}") {
      console.log(this.$route.params);
      let { prize, prizeId, wid, exch_method, type, status } =
        this.$route.params;
      this.signInfo = {
        jpname: prize, // 奖品名称
        prizeId: prizeId, // 奖品id
        jpimg: require(`@/assets/img/jp/g${prizeId}.png`), // 奖品图片
        wid: wid,
        exch_method: exch_method, // 领取方式
        type: type, // 1门店 2景区
        status: status, // 1需要审核
      };
      this.lottery();
    } else {
      this.isin = false;
    }
  },
  methods: {
    //抽奖
    lottery() {
      this.cjclick = true;
      if (this.cjclick) {
        this.$refs.scrollbox.scrollTo({
          left: 2550,
          behavior: "smooth",
        });
        this.timer1 = setTimeout(() => {
          this.$refs.scrollbox.scrollTo({
            left: 0,
            behavior: "smooth",
          });
          this.timer2 = setTimeout(() => {
            clearTimeout(this.timer1);
            this.cjclick = false;
            // 1代表邮寄产品，2代表门店领取，3代表积分，4代表话费
            if (this.signInfo.exch_method == 1) {
              // 线上领取 填写收货地址
              this.online_no_write = true;
            } else if (this.signInfo.exch_method == 2) {
              // 线下领取 填写摩托车编号
              this.underlineshow = true;
            } else if (this.signInfo.exch_method == 3) {
              // 积分
              // if (this.signInfo.type == "1") {
              //   // 门店 审核中
              //   this.reviewshow = true;
              // } else {
              //   // 景区 积分
              this.jifenshow = true;
              // }
            } else if (this.signInfo.exch_method == 4) {
              // 话费
              // if (this.signInfo.type == "1") {
              //   // 门店 审核中
              //   this.reviewshow = true;
              // } else {
              //   // 景区 话费
              this.tipflag = false;
              this.defaultshow = true;
              // }
            }
            clearTimeout(this.timer2);
          }, 1000);
        }, 900);
      }
    },
    // 线上领取 信息提交成功
    closeOnline() {
      this.online_no_write = false;
      if (this.signInfo.type == 2) {
        // 景区
        this.tipflag = true;
        this.defaultshow = true;
      } else {
        // 门店
        if (this.signInfo.status == 1) {
          // 需要审核
          this.reviewshow = true;
        } else {
          // 不需要审核
          this.tipflag = true;
          this.defaultshow = true;
        }
      }
    },
    // 线下领取 车牌提交成功
    closeUnderline(qrcode) {
      this.qrcode = qrcode;
      this.underlineshow = false;
      if (this.signInfo.type == 2) {
        // 景区
        this.qrshow = true;
      } else {
        // 门店
        if (this.signInfo.status == 1) {
          // 需要审核
          this.reviewshow = true;
        } else {
          // 不需要审核
          this.qrshow = true;
        }
      }
    },
  },
  components: {
    Online,
    Underline,
    HxQrcode,
    Jifen,
    Gift,
    Review,
  },
};
</script>
<style lang="less" scoped>
.lottery {
  //抽奖页面
  .lotterycontain {
    .logobox {
      margin-top: 3rem;
    }
    .backbox {
      top: 0;
      margin-top: 2rem;
    }
    .lotterybox {
      width: 673px;
      height: 830px;
      background: url("@/assets/img/cjbg.png") no-repeat;
      background-size: contain;
      margin-top: 2rem;
      // 奖品列表
      .giftbox {
        position: relative;
        width: 558px;
        height: 200px;
        margin-top: 17.5rem;
        margin-left: 4px;
        .giftimgbox {
          height: 100%;
          overflow-x: scroll;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .gitem {
            width: 146px;
            height: 199px;
            background: url("@/assets/img/jp_bg.png") no-repeat;
            background-size: 100% 100%;
            .giftimg {
              width: 120px;
              height: 113px;
              padding: 1rem 17px 0 9px;
            }
            p {
              margin-right: 0.5rem;
              font-size: 1.2rem;
              color: #404040;
              text-align: center;
              line-height: 1.2;
              padding-top: 0.1rem;
            }
          }
          .gitem:first-child {
            margin-left: 0.5rem;
          }
          .gitem:last-child {
            margin-right: 0.2rem;
          }
        }
      }
      // 抽奖中提示
      .drawtips {
        width: 326px;
        height: 97px;
        margin-top: 13.5rem;
        font-size: 3.5rem;
        color: #e60012;
        text-align: center;
        line-height: 97px;
        font-family: "AlibabaPuHuiTi-2-85-Bold";
      }
    }
  }
}
@media only screen and (min-height: 1300px) {
}
@media only screen and (min-height: 1350px) {
}
@media only screen and (min-height: 1440px) {
  .lottery {
    .cjresult_tkbox {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
@media only screen and (min-height: 1480px) {
}
</style>
